Custom Buttons

This example demonstrates how to use the ::part pseudo-element to customize the appearance and positioning of buttons in the viewer.

info

This interactive example demonstrates the concept using React. If you're using a different framework, adapt the core concepts to your preferred technology.

Result

Live Editor

function Example() {
  return (
    <cylindo-viewer
      customer-id="5098"
      code="WHISTLER SOFA BED"
      remote-config="k2hctc08"
    >
      <style>
        {`
          ::part(fab) {
            border-radius: 5px;
            padding: 25px;
          }
          ::part(zoom-out) {
            border-radius: 100%;
          }
          ::part(zoom-in) {
            border-radius: 100%;
          }
          ::part(fullscreen) {
            border: 1px solid gray;
            color: black;
          }
          ::part(view-in-ar) {
            filter: invert(1);
          }
          ::part(navigation-next) {
            position: absolute;
            bottom: 10px;
            right: 10px;
          }
          ::part(navigation-previous) {
            position: absolute;
            bottom: 10px;
            left: 10px;
          }
          ::part(qr-fab) {
            background-color: white;
            color: black;
          }
          `}
      </style>
    </cylindo-viewer>
  );
}